<template>
    <div class="main">
      <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
          style="font-weight: bold;">上海市崇明区教育系统在岗职工工作调动处理（编内人员调动） </span> </div>
      <div class="main-body">
  
        <div class="main-header float-left">
          <!-- <div class="d-flex"> -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="单位：" v-if="schoolList.length > 0">
              <el-select v-model="formInline.gzXqdm" placeholder="请选择">
                <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="教职工名称">
              <el-input v-model="formInline.xm" placeholder="请输入教职工名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
              <el-button type="primary" @click="addjGZgz" icon="el-icon-plus">新增教职工工作调动</el-button>
            </el-form-item>
          </el-form>
          <!-- </div> -->
        </div>
  
        <el-dialog title="教职工调动操作信息显示窗口" :visible.sync="dialogDetails" width="800px" :before-close="handleClose">
          <div style="text-align: center;display: ruby-text;margin-top: 20px;">
            <div style="width: 600px;height: 40px;background-color: bisque;line-height: 40px;">
              请下面输入请求调入教职工的关键信息后，点击“核查后调入”
            </div>
  
          </div>
          <div style="text-align: center;display: ruby-text;margin-top: 20px;">
            请选择调入教职工的身份证件类型:
            <el-select v-model="sfzlxval" placeholder="请选择" style="width: 300px;">
              <el-option v-for="(item, index) in sfzlxArr" :key="index" :label="item.mc" :value="item.dm">
              </el-option>
            </el-select>
          </div>
  
          <div style="text-align: center;display: ruby-text;margin-top: 20px;">
            请输入调入教职工的身份证件号码:
            <el-input v-model="sfzjh" placeholder="请输入证件号码" style="width: 300px;"></el-input>
          </div>
          <div style="text-align: center;display: ruby-text;margin-top: 20px;">
            <el-button type="primary" style="color: #fff;" @click="shenheSel">核查后新增</el-button>
          </div>
  
        </el-dialog>
        <el-dialog title="教职工调动操作信息显示窗口" :visible.sync="dialogDetails2" width="800px" :before-close="handleClose2">
          <div>
            <div style="width:100%;">
              <table border='0' cellspacing="0" cellpadding="0"
                style="border-collapse:collapse;border-style:none;font-family:宋体;font-size:13px; width:100%; ">
                <tr>
                  <td class="td1" style=" width:100px;">
                    身份证件类型
                  </td>
                  <td class="td1" style=" width:200px;">
                    <span>{{formatSfzjlx(faculty.SFZJLX)}}</span>
                  </td>
                  <td class="td1" style=" width:100px;">
                    身份证件号码
                  </td>
                  <td class="td1">
                    <span v-text="faculty.SFZJH"></span>
                  </td>
  
                </tr>
                <tr>
                  <td class="td1">
                    <span style="color: red;">*</span>姓名
                  </td>
                  <td class="td1">
                   <span v-text="faculty.XM"></span>
                  </td>
                  <td class="td1">
                    性别
                  </td>
                  <td class="td1">
                    <el-radio v-model="faculty.XBM" label="1">男</el-radio>
                    <el-radio v-model="faculty.XBM" label="2">女</el-radio>
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    国家地区
                  </td>
                  <td class="td1">
                    <span>{{formatGJDQ(faculty.GJDQ)}}</span>
                  </td>
                  <td class="td1">
                    民族
                  </td>
                  <td class="td1">
                    <span>{{formatMZ(faculty.MZ)}}</span>
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    政治面貌
                  </td>
                  <td class="td1">
                   <span>{{formatZZMM(faculty.ZZMM)}}</span>
                  </td>
                  <td class="td1">
                    出生年月
                  </td>
                  <td class="td1">
                    <span v-text="faculty.CSNY"></span>
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    所在校区
                  </td>
                  <td class="td1">
                    <span v-text="faculty.XQJC"></span>
                  </td>
                  <td class="td1">
                    现工作单位
                  </td>
                  <td class="td1">
                    <span v-text="faculty.XQMC"></span>
                  </td>
                </tr>
  
                <tr>
                  <td class="td1">
                    教职工编号
                  </td>
                  <td class="td1">
                    <span v-text="faculty.TeacherId"></span>
                  </td>
                  <td class="td1">
                    登记状态
                  </td>
                  <td colspan="2" class="td1">
                    <span v-text="faculty.MC"></span>
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    联系电话
                  </td>
                  <td class="td1">
                    <span v-text="faculty.LXDH"></span>
                  </td>
                  <td class="td1">
                    调入校区
                  </td>
                  <td class="td1">
                    <el-select v-model="gzxiaoqu" placeholder="请选择" @change="onChange2">
                    <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
                    </el-option>
                  </el-select>
                  </td>
                </tr>
  
              </table>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit2">提 交</el-button>
          </span>
        </el-dialog>
        <div class="main-center float-left">
          <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
            :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
  
            <el-table-column prop="SQSJ" label="发起日期"></el-table-column>
            <el-table-column prop="XM" label="教职工姓名"></el-table-column>
            <el-table-column prop="deviceType" label="调动信息">
              <template slot-scope="scope">
               <div>
                <span v-text="scope.row.YXQJC" style="margin-right:20px;"></span>
                <i class="el-icon-caret-right" style="color:red;"></i>
                <span v-text="scope.row.HXQJC" style="margin-left:20px;"></span>
               </div>
              </template>
            </el-table-column>
            <el-table-column prop="FQR" label="发起人"></el-table-column>
            <el-table-column prop="LCZT" label="流程状态"></el-table-column>
            <el-table-column prop="SJJG" label="调动结果"></el-table-column>
            <el-table-column prop="SJR" label="审结人"></el-table-column>
  
  
          </el-table>
  
          <div class="footer-pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
              :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
            </el-pagination>
          </div>
        </div>
  
      </div>
    </div>
  </template>
  <script>
  import httpdict from "../../api/dict";
  import httplogin from "../../api/login";
  export default {
    name: 'Social',
    data() {
      return {
        tableData: [{
  
        }],
        formInline: {
          benqu: "",
          gzXqdm: '',
          xm: '',
          ddl_xz: '',
          ddl_jdfs: '',
          currentPage: 1,
          limit: 10,
          total: 0
        },
        ddl_lb_list: [
          {
            value: 0,
            label: '本区编内'
          },
          {
            value: 1,
            label: '本区编外'
          },
        ],//类别 options
        ddl_bb_list: [],//办别 options
        ddl_xz_list: [
          {
            value: '全部',
            label: '全部'
          },
          {
            value: '普通',
            label: '普通'
          },
          {
            value: '工读',
            label: '工读'
          },
          {
            value: '特教',
            label: '特教'
          },
        ],//性质 options
        ddl_jdfs_list: [
          {
            value: '全部',
            label: '全部'
          },
          {
            value: '走读',
            label: '走读'
          },
          {
            value: '寄宿',
            label: '寄宿'
          },
        ],//就读方式 options
        dialogDetails: false,
        dialogVisible2: false,
        schoolList: [],
        sfzlxArr: [],
        sfzjh: "",
        sfzlxval: "1",
        JiaoZhiGongInfo:{},
        faculty:{},
        countryArr:[],
        mzArr:[],
        zzmmArr:[],
        gzxiaoqu:"3101517061"
      }
    },
    mounted() {
      this.getschoolList()
      this.moveFacultyListway()
    },
    methods: {
      async moveFacultyListway() {
        let data = {
          ydlx: "01",
          page: this.formInline.currentPage,
          size: this.formInline.limit,
          xm: this.formInline.xm
        }
        var res = await httplogin.moveFacultyList(data);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list,
          this.formInline.total = res.data.data.total
        }
      },
      addjGZgz() {
        this.getshzjlxway();
        this.GetCountryway();
        this.GetMzway();
        this.GetZzmmway();
        this.dialogDetails = true
      },
      async getshzjlxway() {
        var res = await httpdict.getshzjlx();
        if (res.data.code == 200) {
          this.sfzlxArr = res.data.data.sfzlx;
        }
      },
      async GetCountryway() {
        var res = await httpdict.GetCountry();
        if (res.data.code == 200) {
          this.countryArr = res.data.data.sfzlx;
        }
      },
      async GetMzway() {
        var res = await httpdict.GetMz();
        if (res.data.code == 200) {
          this.mzArr = res.data.data.sfzlx;
        }
      },
      async GetZzmmway() {
        var res = await httpdict.GetZzmm();
        if (res.data.code == 200) {
          this.zzmmArr = res.data.data.sfzlx;
        }
      },
      async onSubmit2(){
        var data ={
          sfzjh: this.faculty.SFZJH,
            sfzjlx:this.faculty.SFZJLX,
          gzXqdm:this.gzxiaoqu,
            ydlx:"01"
        }
      var res = await  httplogin.moveFaculty(data);
      if(res.data.code==200){
        this.$message({
            type: 'success',
            message: res.data.msg
          });
        this.moveFacultyListway()
        this.dialogDetails2 = false
      }
      },
      async getschoolList() {
        let res = await httplogin.getUserPermissionInfo();
        if (res.data.code == 200) {
          // if (res.data.data.estate == "区级") {
          this.schoolList = res.data.data.UserPermission
          this.sortPingyinfun(this.schoolList)
          // }
        }
      },
      sortPingyinfun(list) {
        list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
        return list
      },
     async shenheSel() {
        var data = {
          sfzjh: this.sfzjh,
          sfzjlx: this.sfzlxval
        }
        var res = await httplogin.examineCard(data)
        if (res.data.code == 200) {
          this.dialogDetails = false
          if (res.data.data.examine) {
            this.getFacultyinitialway()
            this.dialogDetails2 =true
          }else{
            this.$alert("本区教职工信息库没有找到该职工信息", '提示', {
              confirmButtonText: '确定',
              dangerouslyUseHTMLString: true,
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: ``
                // });
              }
            });
          }
        }
       
      },
  
      formatSfzjlx(val){
       for (let i = 0; i < this.sfzlxArr.length; i++) {
             if(val== this.sfzlxArr[i].dm){
              return this.sfzlxArr[i].mc
             }
       }
      },
      formatGJDQ(val){
        for (let i = 0; i < this.countryArr.length; i++) {
             if(val== this.countryArr[i].dm){
              return this.countryArr[i].mc
             }
       }
      },
  
      formatMZ(val){
        for (let i = 0; i < this.mzArr.length; i++) {
             if(val== this.mzArr[i].dm){
              return this.mzArr[i].mc
             }
       }
      },
      formatZZMM(val){
        for (let i = 0; i < this.zzmmArr.length; i++) {
             if(val== this.zzmmArr[i].dm){
              return this.zzmmArr[i].mc
             }
       }
      },
  
      async getFacultyinitialway() {
        var data = {
          sfzjh: this.sfzjh,
          sfzjlx: this.sfzlxval
        }
        var res = await httplogin.getFacultyinitial(data);
        if (res.data.code == 200) {
          this.faculty = res.data.data.faculty;
          console.log(this.faculty)
        }
         
      },
      //点击查看详情 open 弹框
      handleClick(row) {
        console.log(row)
        this.dialogDetails = true
      },
      //close 弹框
      handleClose() {
        this.dialogDetails = false
      },
      onSubmit() {
        // console.log(this.formInline);
        this.moveFacultyListway()
      },
      handleSizeChange(val) {
        this.formInline.limit = val
        this.moveFacultyListway()
       
      },
      handleCurrentChange(val) {
        this.formInline.currentPage = val
        this.moveFacultyListway()
        console.log(`当前页: ${val}`);
      }
    }
  }
  </script>
  
  <style scoped>
  ::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;
  }
  
  ::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
  }
  
  .main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
  }
  
  .main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
  }
  
  .float-left {
    width: 100%;
    height: auto;
    float: left;
  }
  
  .main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
  }
  
  .d-flex {
    display: flex;
    align-items: center;
  }
  
  .mr-24 {
    margin-right: 24px;
  }
  
  .fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
  }
  
  .footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
  }
  
  .font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
  }
  </style>
  
  <style scoped>
  .td1 {
    border: 1px solid #8c8c8c;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #3c3c3c;
    padding: 3px;
    /* width: 40%; */
  }
  
  .inputbox {
    text-align: center;
    line-height: 25px;
    border: 1px solid #b3b3b3;
    font-size: 13px;
    height: 25px;
    width: 96%;
  }
  
  .rblList td {
    font-size: 13px;
    color: #3c3c3c;
    border-style: none;
    text-align: left;
    height: 30px;
    line-height: 30px;
  }
  ::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
  
  ::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
  </style>